<template>
  <section class="component contact-information">
    <div class="overflow-hidden">
      <span class="float-left name">联系人信息</span>
      <el-button class="float-right margin-right-30" @click="onClickAddContact">新增联系人</el-button>
    </div>
    <data-box :data="dataSet" class="data-set">
      <template slot="columns">
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="onClickCall(scope.row)" type="text" size="small">拨号</el-button>
            <el-button @click="onClickMessage(scope.row)" type="text" size="small">短信</el-button>
            <el-button @click="onClickVisit(scope.row)" type="text" size="small">外访协催</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="角色"></el-table-column>
        <el-table-column prop="date" label="姓名"></el-table-column>
        <el-table-column prop="date" label="性别"></el-table-column>
        <el-table-column prop="date" label="关系"></el-table-column>
        <el-table-column prop="date" label="身份证号"></el-table-column>
        <el-table-column prop="date" label="电话号码"></el-table-column>
        <el-table-column prop="date" label="身份证地址" :min-width="$helper.getColumnWidth(5)"></el-table-column>
        <el-table-column prop="date" label="现居住地"></el-table-column>
        <el-table-column prop="date" label="现居住地电话" :min-width="$helper.getColumnWidth(5)"></el-table-column>
        <el-table-column prop="date" label="工作单位"></el-table-column>
        <el-table-column prop="date" label="单位电话"></el-table-column>
        <el-table-column prop="date" label="工作地址"></el-table-column>
      </template>
    </data-box>
    <el-dialog title="新增联系人" :visible.sync="dialogVisible" :center="true" width="700px">
      <add-contact />
    </el-dialog>

  </section>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component'
import DataBox from '~/components/common/data-box.vue'
import AddContact from './add-contact.vue'

@Component({
  components: {
    DataBox,
    AddContact
  }
})

export default class ContactInformation extends Vue {
  private dataSet: any = []
  private dialogVisible: boolean = false
  private onClickAddContact() {
    this.dialogVisible = true
  }
  private onClickCall(row) { }
  private onClickMessage(row) { }
  private onClickVisit(row) { }
}

</script>
<style lang="less">
.component.contact-information {
  .name {
    font-size: 18px;
    font-weight: bold;
  }
  .margin-right-30 {
    margin-right: 30px;
  }
  .data-set {
    padding: 0;
    margin-top: 10px;
    padding-right: 30px;
  }
}
</style>
